// import { toDecimalFormate } from '@/utils/common';
import normal from '@/assets/home/normal.png';
import alarm from '@/assets/home/alarm.png';
import danger from '@/assets/home/danger.png';
import nodata from '@/assets/home/nodata.png';

const backMap: Record<number, string> = {
	1: 'noDataBack',
	2: 'normalBack',
	3: 'alarmBack',
	4: 'dangerBack',
};

/**
 * 根据节点状态返回back
 * @param status
 * @returns {*}
 */
export function getBack(status: number) {
	return backMap[status];
}

export default function (G6: any, type: string) {
	console.log('shapenode--');
	/**
	 * 拓扑图编辑器节点
	 */
	G6.registerNode(
		type,
		{
			options: {
				// 正常节点背景
				normalBack: normal,
				// 告警节点背景
				alarmBack: alarm,
				// 危险节点背景
				dangerBack: danger,
				// 无数据节点背景
				noDataBack: nodata,
				style: {
					// 节点填充色
					fill: '#9EC9FF',
					// 节点的描边颜色
					// stroke: '#5B8FF9',
					// 鼠标在该节点上时的鼠标样式，CSS 的 cursor 选项都支持
					cursor: 'default',
				},
				stateStyles: {
					selected: {
						fill: '#9EC9FF',
					},
					hover: {
						cursor: 'move',
					},
				},
			},
			/**
			 * 绘制节点，包含文本
			 * @param  {Object} cfg 节点的配置项
			 * @param  {G.Group} group 节点的容器
			 * @return {G.Shape} 返回一个绘制的图形作为 keyShape，通过 node.get('keyShape') 可以获取。
			 * 关于 keyShape 可参考文档 核心概念-节点/边/Combo-图形 Shape 与 keyShape
			 */
			draw(cfg: any, group: any) {
				// 当前节点填充色
				console.log('drawshape---------------------------1');
				const fill = cfg.style.fill;
				// 当前节点背景
				const thisBack = this.options[getBack(cfg.status)];

				// 1、主图形
				const rect = group.addShape('rect', {
					attrs: {
						x: 0,
						y: 0,
						width: 220,
						height: 180,
						radius: 5,
						//节点的描边颜色
						//stroke,
						//填充色，有了这个填充色才能在点击节点空白的地方也能触发到事件，或者设置图形的draggable为true
						fill: fill,
						//描边宽度
						lineWidth: 0,
						//设置填充的 alpha 或透明值
						fillOpacity: 0,
					},
					name: 'rect-shape',
				});

				// 2、节点背景
				group.addShape('image', {
					attrs: {
						x: 0,
						y: 0,
						width: 220,
						height: 180,
						fill: fill,
						img: thisBack,
					},
					name: 'node-back',
					draggable: true,
				});

				// 3、节点标题
				group.addShape('text', {
					attrs: {
						text: cfg.name,
						x: 15,
						y: 60,
						fill: '#ffffff',
						fontSize: 14,
						textAlign: 'left',
						textBaseline: 'top',
					},
					name: 'node-title',
					draggable: true,
				});

				// 4、节点指标名称
				group.addShape('text', {
					attrs: {
						text: '请求量\n平均响应时长\n健康度',
						x: 15,
						y: 100,
						fill: '#2beded',
						fontSize: 12,
						textAlign: 'left',
						textBaseline: 'top',
						lineHeight: 24,
					},
					name: 'node-indicator-text',
					draggable: true,
				});

				// 5、节点指标值
				group.addShape('text', {
					attrs: {
						// text: cfg.text.reqCount + '\n' + toDecimalFormate(cfg.text.avgDealTime, 'wm') + '\n' + cfg.text.health,
						text: cfg.text.reqCount + '\n' + cfg.text.avgDealTime + '\n' + cfg.text.health,
						x: 110,
						y: 100,
						fill: '#ffffff',
						fontSize: 12,
						textAlign: 'left',
						textBaseline: 'top',
						lineHeight: 24,
					},
					name: 'node-indicator-value',
					draggable: true,
				});

				// 6、添加左右锚点图形
				group.addShape('circle', {
					attrs: {
						x: 0,
						y: 90,
						r: 3,
						fill: '#ffffff',
						stroke: 'red',
					},
					name: 'leftCircleShape',
				});
				group.addShape('circle', {
					attrs: {
						x: 200,
						y: 90,
						r: 3,
						fill: '#ffffff',
						stroke: 'red',
					},
					name: 'rightCircleShape',
				});
				return rect;
			},
			/**
			 * 绘制后的附加操作：隐藏左右锚点图形
			 * @param  {Object} cfg 节点的配置项
			 * @param  {G.Group} group 图形分组，节点中图形对象的容器
			 */
			afterDraw(cfg: any, group: any) {
				// console.log('afterdraw');
				const childrens = group.get('children');
				const leftCircleNode = childrens[childrens.length - 2];
				const rightCircleNode = childrens[childrens.length - 1];
				leftCircleNode.hide();
				rightCircleNode.hide();
			},
			/**
			 * 获取锚点（相关边的连入点）
			 * @param  {Object} cfg 节点的配置项
			 * @return {Array|null} 锚点（相关边的连入点）的数组,如果为 null，则没有控制点
			 */
			getAnchorPoints(cfg: any) {
				return [
					[0, 0.5],
					[1, 0.5],
				];
			},
			/**
			 * 更新节点，包含文本
			 * @override
			 * @param  {Object} cfg 节点的配置项
			 * @param  {item} item 节点
			 */
			update(cfg: any, item: any) {
				const group = item.getContainer();
				const children = group.get('children');
				// 更新节点指标值
				const nodeIndicatorValueShape = children[4];
				nodeIndicatorValueShape.attr({
					text: cfg.text.reqCount + '\n' + cfg.text.avgDealTime + '\n' + cfg.text.health,
					// text: cfg.text.reqCount + '\n' + toDecimalFormate(cfg.text.avgDealTime, 'wm') + '\n' + cfg.text.health,
				});
				// 根据状态更新背景
				const thisBack = this.options[getBack(cfg.status)];
				children[1].attr({
					img: thisBack,
				});
			},
			/**
			 * 响应节点的状态变化。
			 * 在需要使用动画来响应状态变化时需要被复写，其他样式的响应参见下文提及的 [配置状态样式] 文档
			 * @param  {String} name 状态名称
			 * @param  {Object} value 状态值
			 * @param  {Item} item 节点
			 */
			setState(name: any, value: any, item: any) {
				const group = item.getContainer();
				// console.log()
				if (name === 'selected' || name === 'active' || name === 'hover') {
					const rect = group.getChildByIndex(0);
					if (value) {
						rect.attr('fill', this.options.stateStyles.selected.fill);
					} else {
						rect.attr('fill', '#FFFFFF');
					}
				} else if (name === 'hover1') {
					const rect = group.getChildByIndex(0);
					const text = group.getChildByIndex(1);
					if (value) {
						rect.attr('cursor', this.options.stateStyles.hover.cursor);
						if (text) text.attr('cursor', this.options.stateStyles.hover.cursor);
					} else {
						rect.attr('cursor', this.options.style.cursor);
						if (text) text.attr('cursor', this.options.style.cursor);
					}
				}
			},
		},
		'single-node'
	);
}
